<template>
    <div class="order-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                订单列表
            </template>
        </nav-bar>
        <van-tabs ref="tabs" @click="onChangeTab" class="order-tab">
            <van-tab title="全部"></van-tab>
            <van-tab title="待支付"></van-tab>
            <van-tab title="已支付"></van-tab>
            <van-tab title="发货"></van-tab>
            <van-tab title="交易完成"></van-tab>
            <van-tab title="过期"></van-tab>
        </van-tabs>
        <div class="content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="10"
                >
                    <div @click="goTo(item.id)" class="order-item-box" v-for="(item,index) in list" :key="index">
                        <div class="order-item-header">
                            <span style="line-height: 30px;">订单号：{{ item.order_no }} <br> 创建时间：{{ item.created_at }}</span>
                        </div>
                        <van-card 
                            v-for="sub in item.orderDetails.data"
                            :key="sub.id"
                            :num="sub.num"
                            :price="sub.goods.price+'.00'"
                            desc="全场包邮"
                            :title="sub.goods.title"
                            :thumb="sub.goods.cover_url"
                        />
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    import {reactive, ref, toRefs, onMounted} from 'vue';
    import NavBar from '@/components/common/navbar/NavBar.vue';
    import { getOrderList } from '@/network/order';
    import { useRouter } from 'vue-router';

    export default{
        name: 'Order',
        components: {
            NavBar
        },
        setup() {
            // List 组件通过 loading 和 finished 两个变量控制加载状态，
            // 当组件滚动到底部时，会触发load事件并将loading设置true。
            // 此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。
            // 若数据已全部加载完毕，则将finshed设置成true即可。
            
            const router = useRouter();
            let tabs = ref(null);
            const state = reactive({
                loading: false,
                finished: false,
                refreshing: false,
                list: [],
                page: 1,
                totalPage: 0,
                status: 0,
            })
            const onRefresh = () => {
                //是否处于加载状态，加载过程中不触发load事件
                state.refreshing = true;
                //清空列表数据
                state.finished = false;
                //重新加载数据
                //将loading设置为true，表示处于加载状态
                state.loading = true;
                state.page = 1;
                onLoad();
            }
            onMounted(()=>{
                onRefresh(); // 初始化
            })
            const onLoad = () =>{
                if(!state.refreshing && state.page < state.totalPage) {
                    state.page = state.page + 1;
                }
                if(state.refreshing) {
                    state.list = [];
                    state.refreshing = false;
                }
                loadData();
            }
            const loadData = () => {
                getOrderList({page:state.page, status:state.status, include:'orderDetails.goods'}).then(res=>{
                    console.log(res);
                    state.list = state.list.concat(res.data);
                    state.loading = false;
                    console.log(state.page+"##############");
                    state.totalPage = res.meta.pagination.total_page;
                    if(state.page >= state.totalPage) {
                        state.finished = true;
                    }
                })
            }
            // tab切换
            const onChangeTab = (name) => {
                state.status = name;
                onRefresh();
            }
            //到订单详情页
            const goTo = (id) => {
                router.push({path:'/orderdetail', query:{id}});
            }
            return {
                ...toRefs(state),
                onLoad,
                onRefresh,
                tabs,
                onChangeTab,
                goTo
            }
        }
    }
</script>

<style scoped>
    .order-box {
        text-align: left;
    }
    .order-tab {
        margin-top: 44px;
        position: fixed;
        left: 0;
        z-index: 1000;
        width: 100%;
        border-bottom: 1px solid #e9e9e9;
    }
    .content {
        height: 100vh;
        overflow: hidden;
        overflow-y: scroll;
        padding-top: 100px;
    }
    .order-list-refresh .van-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .van-pull-refresh__head {
        background: #f9f9f9;
    }
    .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
    }
    .van-card {
        background-color: #FFFFFF;
        border-radius: 3px;
        margin-top: 10px;
    }
</style>